<template>
  <div class="mine">
      <div class="top">
        <div class="circle"><i class="iconfont">&#xe67b;</i></div>
        <!-- <span>{{$store.state.loginModule.userInfo.nickname}}</span>
        <span>美团积分：{{$store.state.loginModule.userInfo.score}}</span> -->
      </div>
  <div class="property">
    <h5>我的资产</h5>
    <ul>
      <li>红包/神券</li>
      <li>代金券</li>
      <li>津贴</li>
      <li>米粒</li>
      <li>立减金</li>
    </ul>
  </div>

  <div class="collection">
      <h5>我的收藏</h5>
    <div class="collectes">
      <img src="https://p1.meituan.net/wmproduct/af0f687caea1d65739110c961c2c4e4c470311.jpg" alt="">
      <img src="https://p0.meituan.net/wmproduct/f4c55ca54b896a5e8b4b1adbff87b9844024835.png" alt="">
      <img src="https://p1.meituan.net/xianfu/3e95dec3e4aa935b38c67c33a5b128d945649.jpg" alt="">
      <img src="https://p1.meituan.net/wmproduct/37e83316f6b08b6ab62252ebb5532192567156.png" alt="">
      <img src="https://p1.meituan.net/wmproduct/03c8d7a5638f0977d511494fa4522f93241098.jpg" alt="">
      <img src="https://p0.meituan.net/wmproduct/5544d5953a9ed242cac68eb0f35142a6363644.jpg" alt="">
    </div>
  </div>

  <div class="wallet">
      <h5>我的钱包 <span>进入钱包></span></h5>
      <ul>
          <li><span>25.80元</span> <span>账单</span><span>最近支付</span></li>
          <li><span>24.72元</span> <span>未领取</span><span>消费月付奖励</span></li>
          <li><span>1.3万</span> <span>美团借钱</span><span>大约可借</span></li>
          <li><span>5万</span> <span>联名信用卡</span><span>最高额度</span></li>
      </ul>
  </div>

  </div>
</template>

<script>
export default {
  name: 'mine',
  created () {
    console.log(this.$store.state.loginModule.userInfo)
  },
}
</script>

<style lang='less'>
@font-face {
  font-family: 'iconfont';  /* Project id 2963645 */
  src: url('//at.alicdn.com/t/font_2963645_r7bvih9cozj.woff2?t=1638189357933') format('woff2'),
       url('//at.alicdn.com/t/font_2963645_r7bvih9cozj.woff?t=1638189357933') format('woff'),
       url('//at.alicdn.com/t/font_2963645_r7bvih9cozj.ttf?t=1638189357933') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.mine{
  width: 100%;
  height: 100%;
  position: relative;
  background: #F8F8F8;
  .top{
    width: 100%;
    height: 300px;
    background: #F9BD00;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .circle{
      width: 180px;
      height: 180px;
      border-radius: 50%;
      border:2px solid #302e29;
      overflow: hidden;
      position: relative;
      i{
        font-size: 120px;
        position: absolute;
        left: -20px;
      }
    }
    span{
      font-size: 18px;
    }
  }
  .property{
    width: 90%;
    height: 180px;
    margin: 20px auto;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    padding: 10px 20px;
    h5{
      font-size: 20px;
      font-weight: normal;
    }
    ul{
      padding: 10px;
      li{
        float: left;
        font-size: 15px;
        width: 30%;
        text-align: center;
        margin: 10px;
      }
    }
  }
  .collection{
    width: 90%;
    height: 250px;
    margin: 20px auto;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    padding: 10px 20px;
    h5{
      font-size: 20px;
      font-weight: normal;
    }
    .collectes{
      display: flex;
      overflow: auto;
      position: relative;
      img{
        width: 100%;
        height: 180px;
        margin: 0 10px;
        border-radius: 20px;
      }
    }
  }
  .wallet{
    width: 90%;
    height: 250px;
    margin: 20px auto;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    padding: 10px 20px;
    h5{
      font-size: 20px;
      font-weight: normal;
      span{
        font-size: 15px;
        float:right;
      }
    }
    ul{
      display: flex;
      font-size: 18px;
      justify-content: space-around;
      align-items: center;
      li{
        width: 25%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        span{
          &:nth-of-type(2){
            font-size: 13px;
          }
          &:nth-of-type(3){
            font-size: 10px;
          }
        }
      }
    }
  }
}

</style>
